<template>
  <div class="setting-r-content" style="overflow-y:auto;">
    <Row class="setting-r-c_params">
      <Col span="24" class="col_1">
      <Icon style="font-size:20px;" type="md-reorder" />
      <h2>设备类型管理</h2>
      </Col>
      <Col span="24" class="col_2">
      <div class="button_add">
        <Button size="small" @click="onNewBuild">新增</Button>
      </div>
      <div class="table_list">
        <Table :columns="columns" :loading="loading" :data="tableData" />
      </div>
      </Col>
      <Modal v-model="dialogVisible" title="新增设备类型">
        <Form :model="addForm" :label-width="100" ref="refAdd" :rules="rules">
          <FormItem label="类型名称：" prop="name">
            <Input v-model="addForm.name" placeholder="请输入类型名称..." style="width:80%;" />
          </FormItem>
          <FormItem label="类型编号：" prop="type">
            <InputNumber style="width:80%;" v-model="addForm.type" placeholder="请输入类型编号" />
          </FormItem>
          <FormItem label="类别：" prop="seriesId">
            <Select clearable v-model="addForm.seriesId" style="width:80%;">
              <Option v-for="item in deviceTypesSeries" :value="item.id" :key="item.value" :label="item.name" />
            </Select>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="dialogVisible=false;">取消</Button>
          <Button :loading="btnDisabled" type="primary" @click="onSubmit">
            <span v-if="!btnDisabled">确认</span>
            <span v-else>保存中</span>
          </Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>

<script>
import { generatedColumns, rules } from "./utils"
import {
  getDeviceTypeSeries,
  postDeviceType,
  getDeviceType,
  deleteDeviceType
} from "@/api"
export default {
  mounted() {
    this.getTabelDatas()
  },
  data() {
    return {
      btnDisabled: false,
      dialogVisible: false,
      tableData: [],
      addForm: {
        name: "",
        seriesId: "",
        type: null
      },
      deviceTypesSeries: [],
      columns: generatedColumns(this),
      rules: rules()
    }
  },
  methods: {
    getTabelDatas() {
      getDeviceType().then(res => {
        if (res.code === 200) {
          this.tableData = res.data
        }
      })
    },

    onNewBuild() {
      this.dialogVisible = true
      if (this.btnDisabled) {
        this.btnDisabled = false
      }
      this.getDeviceTypeSeries()
      this.$refs.refAdd.resetFields()
    },

    onSubmit() {
      this.$refs.refAdd.validate(valid => {
        if (valid) {
          this.btnDisabled = true
          const params = {
            ...this.addForm
          }
          postDeviceType(params).then(res => {
            if (res.code === 200) {
              this.getTabelDatas()
              this.btnDisabled = false
              this.dialogVisible = false
            } else {
              this.$Message.error(res.message)
              this.btnDisabled = false
            }
          })
        }
      })
    },

    getDeviceTypeSeries() {
      getDeviceTypeSeries().then(res => {
        if (res.code === 200) {
          this.deviceTypesSeries = res.data
        }
      })
    },

    handleDelete(row) {
      const vm = this,
        { id } = row
      deleteDeviceType(id).then(res => {
        if (res.code === 200) {
          vm.$Message.success("操作成功")
          vm.getTabelDatas()
        } else {
          vm.$Message.error(res.message)
        }
      })
    }
  }
}
</script>
